<template>
	<!-- 订阅按钮 -->
	<div class="channel-btn">
		<div class="btns" @click="subscribed">
			<span class="icon-box"><Icon type="add"/></span>
			<span>订阅 {{count|conversion}}</span>
		</div>
		<router-link class="btns" :to="{name: 'Channel', params: {id}}">
			<span>进入频道</span>
			<span class="icon-box"><Icon type="arrowRight"/></span>
		</router-link>
	</div>
</template>

<script>
export default{
	name: 'ChannelBtn',
	props:['id', 'count'],
	filters:{
		// 过滤订阅数据
		conversion(val){
			if(val<10000) return val;
			let str = val.toString(),
					w = str.slice(0, -4),
					q = str.slice(-4, -3),
					point = q>0 ? '.'+q : ''
			return w + point + '万'
		}
	},
	methods:{
		subscribed(){
			console.log(`您订阅了id为 ${this.id} 频道`)
		}
	}
}
</script>

<style scoped lang="less">
.channel-btn{
	display: flex;
	height: 24px;
	.btns{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10px;
		padding: 2px 10px;
		border-radius: 2px;
		border: 1px solid #00a1d6;
		color: #00a1d6;
		box-sizing: border-box;
		cursor: pointer;
		&:first-child{
			margin-left: 0;
			width: 120px;
			padding: 2px;
		}
		span{
			display: flex;
			white-space: nowrap;
			font-size: 12px;
		}
		.icon-box{
			font-size: 16px;
		}
	}
}
</style>
